<template>
	<view class="park">
		
		<swiper
		:indicator-dots="true" 
		:autoplay="true" 
		:interval="3000" 
		 circular=true 
		 indicator-active-color='#1296db'
		 >
			<swiper-item v-for="(item,index) in bannerlist" :key='item.id'>
				<view class="swiper-item">
					
					<image class="img" :src="item.advImg" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		
		<uni-section title="服务" type="line" padding>
			<u-grid :border="false" col="3"  >
				<u-grid-item @click="gotonews">
					 <u-icon name="file-text-fill" color="#2979ff" size="28"></u-icon>
					<text class="grid-text">新闻</text>
				 </u-grid-item>
				 
				 <u-grid-item @click="gotoflev">
				 	 <u-icon name="star-fill" color="#2979ff" size="28"></u-icon>
				 	<text class="grid-text">积分</text>
				  </u-grid-item>
				  
				  <u-grid-item @click="gotofeed">
				  	 <u-icon name="edit-pen-fill" color="#2979ff" size="28"></u-icon>
				  	<text class="grid-text">意见反馈</text>
				   </u-grid-item>
				   
				   <u-grid-item @click="gotocart">
				   	 <u-icon name="car-fill" color="#2979ff" size="28"></u-icon>
				   	<text class="grid-text">车辆</text>
				    </u-grid-item>
					
					<u-grid-item @click="gotorecord">
						 <u-icon name="clock-fill" color="#2979ff" size="28"></u-icon>
						<text class="grid-text">停车记录</text>
					 </u-grid-item>
					
					<u-grid-item @click='gorecharge' >
						 <u-icon name="rmb-circle-fill" color="#2979ff" size="28"></u-icon>
						<text class="grid-text">充值</text>
					 </u-grid-item>
					 
					 <u-grid-item @click='gocorrect'>
					 	 <u-icon name="question" color="#2979ff" size="28"></u-icon>
					 	<text class="grid-text">信息纠错</text>
					  </u-grid-item>
			</u-grid>
		</uni-section>
		
		<uni-section title="停车场" type="line" padding>
			
			<view class="pa" v-for="(item) in parklist" :key="item.id" @click=goparde :data-id="item.id">
				<view class="img">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="txt">
					<view class="name">
						{{item.parkName}}
					</view>
					
					<view class="brief">
						距离: {{item.distance}}
					</view>
					<view class="brief">
						封顶价格: {{item.priceCaps}}元
					</view>
					<view class="brief">
						收费: {{item.rates}}元
					</view>
					
					<view class="brief">
						总停车位: {{item.allPark}}个
					</view>
					
					<view class="brief">
						目前空车位: {{item.vacancy}}个
					</view>
				</view>
			</view>
			
			<uni-pagination title="标题文字" prev-text="上一页" next-text="下一页"  @change="comchange"  :total="total" current="1"/>
		</uni-section>
		
		
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import {getbanner,getproduct,getnew,getpark} from '../../api/parkApi.js'
import {baseurl} from '../../api/request.js'
import mynew from '../../components/mynews/mynews.vue'
import {banner,tingchechang} from '@/mock/park.js'


const bannerlist = ref([])  //轮播列表
const pageNum= ref(1)       //当前页码
const pageSize=ref(10)       //每页数据条数
const total =ref()         //总条数
const parklist =ref([])    //停车场列表

//点击去积分
const gotoflev=()=>{
	uni.navigateTo({
		url:'/pages/park/leve/leve'
	})
}

//点击去信息纠错
const gocorrect=()=>{
	uni.navigateTo({
		url:'/pages/park/correct/correct'
	})
}

//点击去车辆
const gotocart=()=>{
	uni.navigateTo({
		url:'/pages/park/cart/cart'
	})
}
//点击去意见反馈
const gotofeed=()=>{
	uni.navigateTo({
		url:'/pages/park/feedback/feedback'
	})
}

//点击去充值
const gorecharge=()=>{
	uni.navigateTo({
		url:'/pages/park/recharge/recharge'
	})
}

//点击去新闻
const gotonews=()=>{
	uni.navigateTo({
		url:'/pages/park/news/news'
	})
}

//点击去停车记录
const gotorecord=()=>{
	uni.navigateTo({
		url:'/pages/park/record/record'
	})
}

//点击停车场看详情
const goparde=(e)=>{
	console.log(e);
	let id = e.currentTarget.dataset.id
	uni.navigateTo({
		url:'/pages/park/detail/detail?id='+id
	})
}

//停车场下一页信息
const comchange=(e)=>{
	pageNum.value=e.current
	getparkdata()
}

//封装判断图片是空的
function checkimg(imgsrc){
	let img =new Image()  //图片的实力对象 
	img.src=imgsrc        //把地址给图片的对象
	
	//图片的宽高为0证明图片为空 返回默认的图片
	if (img.naturalWidth === 0 || img.naturalWidth === 0) {
		 return '../../static/center4/comm.webp'
	} 
}

//获取停车场信息
const getparkdata=async()=>{
	let res = await getpark({
		data:{
		pageNum:pageNum.value,
		pageSize:pageSize.value
		}
	})
	
	if(res.code==200){
		parklist.value=res.rows.map(item=>{
			total.value=res.total
			item.img=checkimg(item.imgUrl)
			item.opens=(item.open=="Y")?'外来车辆可以停':'外来车辆不可以停'
			return item;
		})
	}else{
		//模拟数据
		total.value=tingchechang().length
		parklist.value= tingchechang().map(item=>{
			item.opens=(item.open=="Y")?'外来车辆可以停':'外来车辆不可以停'
			return item;
		})
		
	}
	console.log(parklist.value);
	console.log(total.value);
}

//获取轮播数据
const getbannerdata=async()=>{
	let res = await getbanner({
		data:{}
	})

	if(res.code==200){
		bannerlist.value=res.rows.map(item=>{
		item.img=baseurl+item.advImg
		return item;
		})
	}else{
		//模拟数据
		bannerlist.value=banner()
	}
	console.log(bannerlist.value);
}	


	
onMounted(()=>{
	getbannerdata();
	getparkdata()
})
	
</script>

<style lang="scss">
.park{

	.swiper {
	  width: 100%;
	   height: 150px;
	}
	.swiper-item {
	  width: 100%;
	  height: 150px;
			
		.img{
		 width: 100%;
		 height:100%;	  
		}
	}
	
	.u-grid-item{
	padding: 6px 0px;
	margin: 6px 0px;
	
		
	.grid-text{
		width: 100%;
		font-size: 12px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: center;
	}
		
	}
	
	.pa{
		width: 100%;
		height: 260rpx;
		display: flex;
		justify-content:space-between;
		align-items: center;
		margin: 20rpx 0;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 16rpx;
		
		.img{
			flex: 1;
			width: 200rpx;
			height: 240rpx;
			
			
			image{
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
		
		.txt{
			flex: 2;
			margin-left: 10px;
			
		.name{
			
			font-size: 16px;
			font-weight: 700;
			color: #000;
			width: 200px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-bottom: 10px;
		}	
			
		.brief{
			width: 100%;
			color: #525252;
			font-size: 14px;
			line-height: 18px;
			
		}	
			
		}
		
		
		
		
	}
}

</style>
